<template>
    <div>
      <div v-bind:class="{ active: isActive, 'text-danger': hasError}">bind1</div>
      <div v-bind:class="classObject">bind2</div>
      <div v-bind:class="baseClassObject">bind3</div>
      <div v-bind:class="[activeClass, errorClass]">bind4</div>
      <div v-bind:class="[errorClass, isActive ? activeClass : '']">bind5</div>
      <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px'}">inner style bind</div>
      <div v-bind:style="styleObject">innner Style Object</div>
      <div v-bind:style="[baseStyles, overridingStyles]">styles array</div>
    </div>
</template>
<script>
export default {
  name: 'watch',
  data () {
    return {
      title: 'styleBind 样式绑定',
      isActive: true,
      hasError: true,
      classObject: {
        active: true,
        'text-danger': true
      },
      error: {
        value: true,
        type: 'fatal'
      },
      activeClass: 'active',
      errorClass: 'text-danger',
      arrayDesc: '我们发现也可以使用数组,数组中还可以使用三元运算符',
      activeColor: 'green',
      fontSize: 30,
      inlineDesc: '我们测试内联样式时样式的修改',
      styleObject: {
        color: 'brown',
        fontSize: '50px'
      },
      baseStyles: {
        color: 'purple',
        fontSize: '40px'
      },
      overridingStyles: {
        'font-weight': 'bold'
      },
      compareDesc: 'v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的'
    }
  },
  computed: {
    baseClassObject: function () {
      return {
        base: true,
        baseActive: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
        desc: '我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式'
      }
    }
  }
}
</script>

<style>
.base {
  width: 100px;
  height: 100px;
}
.baseActive {
  background: yellow;
}
.baseTextDanger {
  background: blue;
}
.active {
  width: 100px;
  height: 100px;
  background: green;
}
.text-danger {
  background: red;
}
</style>
